<template>
  <!-- 工单详情 -->
  <a-modal
    v-model:open="visible"
    title="操作记录"
    @ok="handleOk"
    class="addStation"
    destroyOnClose
    :width="1000"
    @cancel="cancel"
    centered
  >
    <div class="details">
      <div class="content">
        <a-table
          :dataSource="infoData"
          :columns="logColumns"
          size="small"
          :scroll="tableScroll"
          @resizeColumn="handleResizeColumn"
          pagination
          class="table"
          :loading="loading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'attach'">
              <div
                v-if="record?.attach"
                @click="dowload(record?.attach)"
                class="downloadBtn"
              >
                <template v-if="record"></template>
                下载（）
              </div>
            </template>
          </template>
        </a-table>
      </div>
    </div>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">关闭</a-button>
      </div>
    </template>
  </a-modal>
</template>
<script setup>

import { WORK_ORDER_STATUS, HANDLE_NODE_TYPE } from "@/constants/workOrder"
const $api = inject("$api")
const props = defineProps({
  recordVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
})
const loading = ref(false)
const visible = ref(props.recordVisible)
const emits = defineEmits(["update:recordVisible", "getOrderList"])
const errColumns = ref([
  {
    title: "提出人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "问题描述",
    dataIndex: "dealDesc",
    key: "dealDesc",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "问题提出时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "附件",
    dataIndex: "attach",
    key: "attach",
    //width: 120,
    align: "center",
    fixed: "right",
  },
])
const logColumns = ref([
  {
    title: "操作人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "操作节点",
    dataIndex: "typeStr",
    key: "typeStr",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "处理描述",
    dataIndex: "remark",
    key: "remark",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "节点工作票状态",
    dataIndex: "stateStr",
    key: "stateStr",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "操作时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 210,
    resizable: true,
    align: "center",
  },
  {
    title: "附件",
    dataIndex: "attach",
    key: "attach",
    width: 120,
    align: "center",
    fixed: "right",
  },
])
watch(
  () => props.recordVisible,
  (val) => {
    visible.value = val
    if (val) {
      getTicketRecordList()
    }
  }
)
let params = ref({
  current: 1,
  size: 10,
  ticketId: null,
})
const labelCol = { style: { width: "100px" } }
const infoData = ref([])
const getTicketRecordList = async () => {
  loading.value = true
  params.value.ticketId = props.rowData.id
  const res = await $api.ticketDealLog(params.value)
  loading.value = false
  if (res && res.code === 0 && res.data) {
    infoData.value = res.data.records.map((item) => {
      if (item?.attach) {
        item.attachArry = item?.attach.replace(/,$/, "").split(",").map(Number)
      } else {
        item.attachArry = []
      }
      return item
    })

    /* if (res.data.records?.attach) { 

    } */
  }
}
const cancel = () => {
  emits("update:recordVisible", false)
  infoData.value = []
}

const dowload = async (id) => {
  const urlRes = await $api.fileFindByIds(id)
  if (urlRes?.data.length) {
    for (let i = 0; i < urlRes?.data.length; i++) {
      window.open(urlRes?.data[i]?.url)
    }
    //window.open(urlRes?.data[0]?.url)
  }
}
</script>

<style lang="less" scoped>
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.details {
  .title {
    font-size: 15px;
    margin: 30px 0 0 0;
  }
  .detailsInfo {
    // padding: 0 20px;
  }
  .infoItem {
    width: 33.33%;
    display: inline-block;
    margin-top: 20px;
  }
  .itemLabel,
  .itemName {
    display: inline-block;
  }
  .itemLabel {
    width: 120px;
    text-align: right;
  }
  .itemName {
    width: 195px;
    vertical-align: top;
  }
}
.table {
  margin-top: 20px;
}
.downloadBtn {
  padding: 0 5px;
  color: #1655ad;
  cursor: pointer;
}
</style>
